<section class="column">
  <app-view-header>
    <i class="fa fa-list-alt" aria-hidden="true"></i> Playlists
    <div class="button-group actions">
      <a routerLink="/me/playlists/{{selectedAccount.provider}}/new"
         class="btn btn-primary">
        <i class="fa fa-plus" aria-hidden="true"></i>
        Add playlist
      </a>
    </div>
  </app-view-header>

  <app-tab-bar [showTabBar]="true"
               (tabChange)="selectTab($event)">
    <app-tab-pane
      *ngFor="let account of accounts.models"
      [id]="account.provider"
      [title]="availableProviderMap[account.provider].title"
      [icon]="availableProviderMap[account.provider].icon">
      <div *ngIf="account.playlists.length > 0 && account.isConnected()">
        <ul class="cp-grid">
          <li *ngFor="let playlist of account.playlists.models">
            <div class="grid-card">
              <div class="image">
                <img *ngIf=playlist.image.getMediumSizeUrl()
                     [src]="playlist.image.getMediumSizeUrl()">
                <img *ngIf=!playlist.image.getMediumSizeUrl()
                     src="/assets/cassette.jpg">
              </div>
              <div class="description">
                <div class="title">
                  {{playlist.title}}
                </div>
              </div>
              <div class="actions">
                <div class="btn btn-link btn-default" (click)="play(playlist)">
                  Play
                </div>
                <a routerLink="/playlists/{{playlist.provider}}/{{playlist.id}}" class="btn btn-link btn-default">
                  Show Tracks
                </a>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div *ngIf="!account.playlists.isSyncing && account.playlists.length === 0 && account.isConnected()">
        <app-empty-state title="Create a playlist to collect both SoundCloud and YouTube tracks"
                         icon="fa fa-list-alt"
                         ctaLink="/me/playlists/{{account.provider}}/new"
                         ctaText="Create a playlist">
        </app-empty-state>
      </div>

      <div *ngIf="!account.isConnected()">
        <app-empty-state
          title="Connect with {{availableProviderMap[account.provider].title}} to syncronize your playlists"
          [icon]="availableProviderMap[account.provider].icon"
          (ctaClick)="connect(account)"
          ctaText="Login with {{availableProviderMap[account.provider].title}}">
        </app-empty-state>
      </div>
    </app-tab-pane>
  </app-tab-bar>
</section>
